// 引入createApp用于创建应用
import {createApp} from 'vue'
// 引入App根组件
import App from './App.vue'
import '../style/global.css'
import {router} from "@/router/index.js";
import {createPinia} from "pinia";
import Person from "@/functions/Person.vue";

const app = createApp(App)
const pinia = createPinia()
app.use(router)
app.use(pinia)
/**
 * 全局注册组件
 * 其中 'person' 是组件的注册名称（使用时需以 <person> 标签形式调用）
 */
app.component('person', Person)
/**
 * <template>
 *   <div>
 *     <p>{{ $message }}</p>
 *     <p>{{ $utils.formatDate(new Date()) }}</p>
 *   </div>
 * </template>
 */
app.config.globalProperties.$message = '这是全局消息'
/**
 * <script setup>
 * import { getCurrentInstance } from 'vue'
 *
 * // 获取当前组件实例
 * const instance = getCurrentInstance()
 *
 * // 访问全局属性
 * console.log(instance.appContext.config.globalProperties.$message)
 * instance.appContext.config.globalProperties.$utils.log('测试日志')
 * </script>
 */
app.config.globalProperties.$utils = {
    formatDate(date) {
        // 日期格式化逻辑
        return new Date(date).toLocaleString()
    },
    log(message) {
        console.log('[全局日志]', message)
    }
}
/**
 * <template>
 *   <p v-color="'red'">这段文字是红色的</p>
 *   <p v-color="dynamicColor">这段文字颜色动态变化</p>
 * </template>
 *
 * <script setup>
 * import { ref } from 'vue'
 * const dynamicColor = ref('blue')
 * </script>
 */
// 注册带参数的指令
app.directive('color', {
    mounted(el, binding) {
        // binding.value 是指令的参数值
        el.style.color = binding.value
    },
    updated(el, binding) {
        // 当参数值变化时更新
        el.style.color = binding.value
    }
})


// 定义一个简单的插件
const myPlugin = {
    install(app, options) {
        // 1. 注册全局指令
        app.directive('focus', {
            mounted(el) {
                el.focus()
            }
        })

        // 2. 注册全局属性
        app.config.globalProperties.$hello = (name) => {
            return `Hello, ${name}!`
        }

        // 3. 使用插件选项
        if (options.defaultName) {
            app.config.globalProperties.$defaultName = options.defaultName
        }
    }
}

// 使用插件，可传递可选参数
app.use(myPlugin, {defaultName: 'Vue'})

app.mount('#app')